<template>
    <div id="home">




      <mt-swipe :auto="4000" :class="hei200">
        <mt-swipe-item v-for="(item, index) in swip" :key="index">
          <a :href="item.url">
            <img :class="swipImg" :src="item.img" alt="">
          </a>
        </mt-swipe-item>
      </mt-swipe>


      <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link :to="{name:'news'}">
              <img src="./../assets/news.png" alt="">
              <div class="mui-media-body">新闻资讯</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link :to="{name:'picShare'}">
              <img src="./../assets/picShare.png" alt="">
              <div class="mui-media-body">图文分享</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link :to="{name:'shop'}">
              <img src="./../assets/goodShow.png" alt="">
              <div class="mui-media-body">商品展示</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link :to="{name:'feedBack'}">
              <img src="./../assets/feedback.png" alt="">
              <div class="mui-media-body">留言反馈</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="./../assets/search.png" alt="">
            <div class="mui-media-body">搜索咨询</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="./../assets/callme.png" alt="">
            <div class="mui-media-body">联系我们</div></a></li>
        </ul>
      </div>


    </div>
</template>

<script>

  import mintHead from './mintHead';
  import  mintFoot from './mintFoot';

    export default {
        name: "home",
      data(){
        return {
          swip:[],
          hei200:"hei200",
          swipImg:"swipImg",
        }
      },
      components:{mintHead, mintFoot},
      created(){
        this.$axios.get('swip')
        .then(res => {
          this.swip = res.data.lunbo;
        })
        .catch(err => console.log(err))
      }
    }
</script>

<style scoped>
  .hei200{
    height:200px;
  }
  .swipImg{
    height: 200px;
    /*width: 300px;*/
  }

  #home{
    min-height: 800px;
  }

  .mui-grid-view.mui-grid-9{
    background-color: white;
  }

  ul img{
    width:50px;
  }
</style>
